<template>
  <div id="maxdiv">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <el-form class="form" ref="form" :model="form" label-width="80px">
            <el-form-item label="头像">
              <el-row class="row">
                <img
                  style="border-radius: 50%; width: 150px; height: 150px"
                  :src="form.circleUrl"
                  alt=""
                />
                <!-- <el-avatar fit="cover" :src="circleUrl"></el-avatar> -->
              </el-row>
            </el-form-item>
            <el-form-item label="学号">
              <!-- <el-input v-model="form.name"></el-input> -->
              <el-row class="row we" v-text="form.num"></el-row>
            </el-form-item>
            <el-form-item label="姓名">
              <el-row class="row we" v-text="form.name"></el-row>
            </el-form-item>
            <el-form-item label="email">
              <el-row class="row we" v-text="form.email"></el-row>
            </el-form-item>
            <el-form-item label="手机号">
              <el-row class="row we" v-text="form.phone"></el-row>
            </el-form-item>
            <el-form-item v-if="form.dormId==null || form.dormId==undefined" label="宿舍号">
              <el-row class="row we" v-text="form.dormId"></el-row>
            </el-form-item>
            <el-form-item label="性别">
              <el-row
                class="row we"
                v-text="form.sex == 0 ? '男' : '女'"
              ></el-row>
            </el-form-item>
            <el-form-item label="年级">
              <el-row class="row we">
                {{
                  this.form.grade == 0
                    ? "大一"
                    : this.form.grade == 1
                    ? "大二"
                    : this.form.grade == 2
                    ? "大三"
                    : "大四"
                }}
              </el-row>
            </el-form-item>
            <el-form-item label="账号状态">
              <el-row class="row we">
                {{
                  this.form.status == 0
                    ? "禁用"
                    : "启用"
                }}
              </el-row>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="addOrUpdateHandle()"
                >修改</el-button
              >
              <!-- <el-button>取消</el-button> -->
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card01">
          <el-form
            :inline="true"
            :model="dataForm"
            @keyup.enter.native="getDataList()"
          >
            <el-form-item>
              <span style="font: bold; font-family: 微软雅黑; font-size: 30px"
                >我的违规记录</span
              >
            </el-form-item>
            <el-form-item>
              <!-- <el-input
                v-model="dataForm.key"
                placeholder="参数名"
                clearable
              ></el-input> -->
            </el-form-item>
            <el-form-item>
              <!-- <el-button @click="getDataList()">查询</el-button> -->
              <!-- <el-button
                v-if="isAuth('sys:dormviolation:save')"
                type="primary"
                @click="addOrUpdateHandle()"
                >新增</el-button
              >
              <el-button
                v-if="isAuth('sys:dormviolation:delete')"
                type="danger"
                @click="deleteHandle()"
                :disabled="dataListSelections.length <= 0"
                >批量删除</el-button
              > -->
            </el-form-item>
          </el-form>
          <el-table
            :data="dataList"
            border
            v-loading="dataListLoading"
            @selection-change="selectionChangeHandle"
            style="width: 100%"
          >
            <el-table-column
              type="selection"
              header-align="center"
              align="center"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="num"
              header-align="center"
              align="center"
              label="学号"
            >
            </el-table-column>
            <el-table-column
              prop="realName"
              header-align="center"
              align="center"
              label="姓名"
            >
            </el-table-column>
            <el-table-column
              prop="reason"
              header-align="center"
              align="center"
              label="违规事由"
            >
            </el-table-column>
            <el-table-column
              prop="confirmImg"
              header-align="center"
              align="center"
              label="证明图片"
            >
              <template slot-scope="scope">
                <img
                  :src="scope.row.confirmImg"
                  style="width: 100px; height: 80px"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="result"
              header-align="center"
              align="center"
              label="处理结果"
            >
            </el-table-column>
            <el-table-column
              prop="createTime"
              header-align="center"
              align="center"
              label="违规时间"
            >
            </el-table-column>
            <!-- <el-table-column
              prop="dormId"
              header-align="center"
              align="center"
              label="违规人宿舍号"
            >
            </el-table-column> -->
            <!-- <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              width="150"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="addOrUpdateHandle(scope.row.id)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="deleteHandle(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column> -->
          </el-table>
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
          <!-- 弹窗, 新增 / 修改 -->
          <!-- <add-or-update
            v-if="addOrUpdateVisible"
            ref="addOrUpdate"
            @refreshDataList="getDataList"
          ></add-or-update> -->

          <add-or-update
            v-if="addOrUpdateVisible"
            ref="addOrUpdate"
            @refreshDataList="getUserInfo"
          >
          </add-or-update>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import AddOrUpdate from "./violation-add-or-update";
import AddOrUpdate from "./center-add-or-update";
export default {
  //import 引入的组件需要注入到对象中才能使用

  components: { AddOrUpdate },
  props: {},
  data() {
    //这里存数据
    return {
      dataForm: {
        key: "",
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      addOrUpdateVisible01: false,

      sizeList: ["large", "medium", "small"],
      form: {
        num: "20034460330",
        name: "lizhiie",
        email: "123@qq.com",
        phone: "13434615275",
        dormId: "906",
        sex: "",
        circleUrl: "",
        grade: "",
        status: ""
      },
    };
  },
  //计算属性
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法
  methods: {
    getUserInfo() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/sys/user/info"),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          (this.form.name = data.data.realName),
            (this.form.num = data.data.num),
            (this.form.email = data.data.email),
            (this.form.phone = data.data.mobile),
            (this.form.dormId =
              data.data.firstLevel + data.data.secondLevel + data.data.dormId),
            (this.form.circleUrl = data.data.headImg);
          this.form.sex = data.data.sex;
          this.form.grade = data.data.grade;
          this.form.status = data.data.status;
        }
        this.dataListLoading = false;
      });
    },
    onSubmit() {
      console.log("submit!");
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/sys/dormviolation/getByCurrentUserId"),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.data;
          // this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle() {
      var id = 0;
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },

    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map((item) => {
            return item.id;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/sys/dormviolation/delete"),
          method: "post",
          data: this.$http.adornData(ids, false),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              },
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //声明周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁之后
  activated() {
    this.getDataList();
    this.getUserInfo();
  }, //缓存keep-alive
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  align-self: center;
  width: auto;
}
.box-card01 {
  align-self: center;
  width: auto;
}
.row {
  width: auto;
  margin: 0 auto;
}
.we {
  background-color: rgb(255, 251, 0);
}
.form {
  align-content: center;
  text-align: center;
  align-items: center;
}
#maxdiv {
  /* width: 100%;
  height: 100%; */
  align-content: center;
  /* background: url("https://gulimall-lemonx.oss-cn-shenzhen.aliyuncs.com/2022-10-15/87b7eeb4-2e33-46b4-8197-b7cc19804897_9aca5eedd9f87c24d25119ec6b2625f9.jpg"); */
}
</style>